<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="/framework/bootstrap/css/bootstrap-3.0.0.min.css">
    <link rel="stylesheet" href="/css/aui/aui-flex.css">
<style>
        html,body{
            width: 100%;
            height: 100%;
        }
        #select-plc{
            position: fixed;
            z-index: 999;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,.1);
        }
        #plc-dialog{
            position: absolute;
            top: 45px;
            width: 1001px;
            left: 50%;
            margin-left: -500px;
            border-radius: 10px;
            background-color: #fff;
            overflow: hidden;
        }
        #plc-input-box,#plc-output-box,#analog-signal-box{
            float: left;
        }
        #plc-input-box{
            width: 1001px;
            height: 270px;
            border-bottom: 1px solid #c7c7c7;
        }
        #plc-output-box{
            width: 601px;
            height: 270px;
            border-right: 1px solid #c7c7c7;
        }
        #analog-signal-box{
            width: 400px;
            height: 270px;
        }
        .plc-title{
            float: left;
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
        }
        .plc-ul{
            float: left;
            padding: 0 10px;
        }
        .plc-item{
            width: 80px;
        }
        .analog{
            width: 180px;
        }
        .plc-item,.analog{
            height: 30px;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s;
        }
        .plc-item.checked,.plc-item:hover,.analog.checked,.analog:hover{
            background-color: #39baff;
            color: #fff;
        }
        .select-plc-btn{
            float: left;
            width: 100%;
            height: 30px;
            margin-top: 10px;
            line-height: 30px;
            text-align: center;
            font-size: 14px;
            background-color: #39baff;
            color:#fff;
            cursor: pointer;
        }
        .select-plc-btn:active{
            background-color: #3499db;
        }
    </style>
    </head>
<body>
<div style="position:relative;width: 100%;height: 100%;overflow: auto">
    <div style="padding: 0 15px;height: 30px;line-height: 30px;">
        <div class="pull-left">时序图查看:</div>
        <div class="pull-right" style="height: 30px;line-height: 30px">
            <button class="btn btn-info btn-xs" onclick="openPlcDialog()">重新选择</button>
            <button class="btn btn-info btn-link" onclick="history.back()">返回上级</button>
        </div>
    </div>
    <div id="1" style="position:absolute;top:30px;width: 100%;bottom: 0;"></div>
</div>
<div id="select-plc">
    <div class="plc-title">请选择需要查看的信号点</div>
    <div id="plc-dialog">
        <div id="plc-input-box">
            <div class="plc-title">plc输入</div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3018" data-index="0">I0.0</div>
                <div class="plc-item" data-byte="VB3018" data-index="1">I0.1</div>
                <div class="plc-item" data-byte="VB3018" data-index="2">I0.2</div>
                <div class="plc-item" data-byte="VB3018" data-index="3">I0.3</div>
                <div class="plc-item" data-byte="VB3018" data-index="4">I0.4</div>
                <div class="plc-item" data-byte="VB3018" data-index="5">I0.5</div>
                <div class="plc-item" data-byte="VB3018" data-index="6">I0.6</div>
                <div class="plc-item" data-byte="VB3018" data-index="7">I0.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3019" data-index="0">I1.0</div>
                <div class="plc-item" data-byte="VB3019" data-index="1">I1.1</div>
                <div class="plc-item" data-byte="VB3019" data-index="2">I1.2</div>
                <div class="plc-item" data-byte="VB3019" data-index="3">I1.3</div>
                <div class="plc-item" data-byte="VB3019" data-index="4">I1.4</div>
                <div class="plc-item" data-byte="VB3019" data-index="5">I1.5</div>
                <div class="plc-item" data-byte="VB3019" data-index="6">I1.6</div>
                <div class="plc-item" data-byte="VB3019" data-index="7">I1.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3020" data-index="0">I2.0</div>
                <div class="plc-item" data-byte="VB3020" data-index="1">I2.1</div>
                <div class="plc-item" data-byte="VB3020" data-index="2">I2.2</div>
                <div class="plc-item" data-byte="VB3020" data-index="3">I2.3</div>
                <div class="plc-item" data-byte="VB3020" data-index="4">I2.4</div>
                <div class="plc-item" data-byte="VB3020" data-index="5">I2.5</div>
                <div class="plc-item" data-byte="VB3020" data-index="6">I2.6</div>
                <div class="plc-item" data-byte="VB3020" data-index="7">I2.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3021" data-index="0">I3.0</div>
                <div class="plc-item" data-byte="VB3021" data-index="1">I3.1</div>
                <div class="plc-item" data-byte="VB3021" data-index="2">I3.2</div>
                <div class="plc-item" data-byte="VB3021" data-index="3">I3.3</div>
                <div class="plc-item" data-byte="VB3021" data-index="4">I3.4</div>
                <div class="plc-item" data-byte="VB3021" data-index="5">I3.5</div>
                <div class="plc-item" data-byte="VB3021" data-index="6">I3.6</div>
                <div class="plc-item" data-byte="VB3021" data-index="7">I3.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3022" data-index="0">I4.0</div>
                <div class="plc-item" data-byte="VB3022" data-index="1">I4.1</div>
                <div class="plc-item" data-byte="VB3022" data-index="2">I4.2</div>
                <div class="plc-item" data-byte="VB3022" data-index="3">I4.3</div>
                <div class="plc-item" data-byte="VB3022" data-index="4">I4.4</div>
                <div class="plc-item" data-byte="VB3022" data-index="5">I4.5</div>
                <div class="plc-item" data-byte="VB3022" data-index="6">I4.6</div>
                <div class="plc-item" data-byte="VB3022" data-index="7">I4.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3023" data-index="0">I5.0</div>
                <div class="plc-item" data-byte="VB3023" data-index="1">I5.1</div>
                <div class="plc-item" data-byte="VB3023" data-index="2">I5.2</div>
                <div class="plc-item" data-byte="VB3023" data-index="3">I5.3</div>
                <div class="plc-item" data-byte="VB3023" data-index="4">I5.4</div>
                <div class="plc-item" data-byte="VB3023" data-index="5">I5.5</div>
                <div class="plc-item" data-byte="VB3023" data-index="6">I5.6</div>
                <div class="plc-item" data-byte="VB3023" data-index="7">I5.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3024" data-index="0">I6.0</div>
                <div class="plc-item" data-byte="VB3024" data-index="1">I6.1</div>
                <div class="plc-item" data-byte="VB3024" data-index="2">I6.2</div>
                <div class="plc-item" data-byte="VB3024" data-index="3">I6.3</div>
                <div class="plc-item" data-byte="VB3024" data-index="4">I6.4</div>
                <div class="plc-item" data-byte="VB3024" data-index="5">I6.5</div>
                <div class="plc-item" data-byte="VB3024" data-index="6">I6.6</div>
                <div class="plc-item" data-byte="VB3024" data-index="7">I6.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3025" data-index="0">I7.0</div>
                <div class="plc-item" data-byte="VB3025" data-index="1">I7.1</div>
                <div class="plc-item" data-byte="VB3025" data-index="2">I7.2</div>
                <div class="plc-item" data-byte="VB3025" data-index="3">I7.3</div>
                <div class="plc-item" data-byte="VB3025" data-index="4">I7.4</div>
                <div class="plc-item" data-byte="VB3025" data-index="5">I7.5</div>
                <div class="plc-item" data-byte="VB3025" data-index="6">I7.6</div>
                <div class="plc-item" data-byte="VB3025" data-index="7">I7.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3026" data-index="0">I8.0</div>
                <div class="plc-item" data-byte="VB3026" data-index="1">I8.1</div>
                <div class="plc-item" data-byte="VB3026" data-index="2">I8.2</div>
                <div class="plc-item" data-byte="VB3026" data-index="3">I8.3</div>
                <div class="plc-item" data-byte="VB3026" data-index="4">I8.4</div>
                <div class="plc-item" data-byte="VB3026" data-index="5">I8.5</div>
                <div class="plc-item" data-byte="VB3026" data-index="6">I8.6</div>
                <div class="plc-item" data-byte="VB3026" data-index="7">I8.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3027" data-index="0">I9.0</div>
                <div class="plc-item" data-byte="VB3027" data-index="1">I9.1</div>
                <div class="plc-item" data-byte="VB3027" data-index="2">I9.2</div>
                <div class="plc-item" data-byte="VB3027" data-index="3">I9.3</div>
                <div class="plc-item" data-byte="VB3027" data-index="4">I9.4</div>
                <div class="plc-item" data-byte="VB3027" data-index="5">I9.5</div>
                <div class="plc-item" data-byte="VB3027" data-index="6">I9.6</div>
                <div class="plc-item" data-byte="VB3027" data-index="7">I9.7</div>
            </div>
        </div>
        <div id="plc-output-box">
            <div class="plc-title">plc输出</div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3028" data-index="0">Q0.0</div>
                <div class="plc-item" data-byte="VB3028" data-index="1">Q0.1</div>
                <div class="plc-item" data-byte="VB3028" data-index="2">Q0.2</div>
                <div class="plc-item" data-byte="VB3028" data-index="3">Q0.3</div>
                <div class="plc-item" data-byte="VB3028" data-index="4">Q0.4</div>
                <div class="plc-item" data-byte="VB3028" data-index="5">Q0.5</div>
                <div class="plc-item" data-byte="VB3028" data-index="6">Q0.6</div>
                <div class="plc-item" data-byte="VB3028" data-index="7">Q0.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3029" data-index="0">Q1.0</div>
                <div class="plc-item" data-byte="VB3029" data-index="1">Q1.1</div>
                <div class="plc-item" data-byte="VB3029" data-index="2">Q1.2</div>
                <div class="plc-item" data-byte="VB3029" data-index="3">Q1.3</div>
                <div class="plc-item" data-byte="VB3029" data-index="0">Q1.4</div>
                <div class="plc-item" data-byte="VB3029" data-index="0">Q1.5</div>
                <div class="plc-item" data-byte="VB3029" data-index="0">Q1.6</div>
                <div class="plc-item" data-byte="VB3029" data-index="0">Q1.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3030" data-index="0">Q2.0</div>
                <div class="plc-item" data-byte="VB3030" data-index="1">Q2.1</div>
                <div class="plc-item" data-byte="VB3030" data-index="2">Q2.2</div>
                <div class="plc-item" data-byte="VB3030" data-index="3">Q2.3</div>
                <div class="plc-item" data-byte="VB3030" data-index="4">Q2.4</div>
                <div class="plc-item" data-byte="VB3030" data-index="5">Q2.5</div>
                <div class="plc-item" data-byte="VB3030" data-index="6">Q2.6</div>
                <div class="plc-item" data-byte="VB3030" data-index="7">Q2.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3031" data-index="0">Q3.0</div>
                <div class="plc-item" data-byte="VB3031" data-index="1">Q3.1</div>
                <div class="plc-item" data-byte="VB3031" data-index="2">Q3.2</div>
                <div class="plc-item" data-byte="VB3031" data-index="3">Q3.3</div>
                <div class="plc-item" data-byte="VB3031" data-index="4">Q3.4</div>
                <div class="plc-item" data-byte="VB3031" data-index="5">Q3.5</div>
                <div class="plc-item" data-byte="VB3031" data-index="6">Q3.6</div>
                <div class="plc-item" data-byte="VB3031" data-index="7">Q3.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3032" data-index="0">Q4.0</div>
                <div class="plc-item" data-byte="VB3032" data-index="1">Q4.1</div>
                <div class="plc-item" data-byte="VB3032" data-index="2">Q4.2</div>
                <div class="plc-item" data-byte="VB3032" data-index="3">Q4.3</div>
                <div class="plc-item" data-byte="VB3032" data-index="4">Q4.4</div>
                <div class="plc-item" data-byte="VB3032" data-index="5">Q4.5</div>
                <div class="plc-item" data-byte="VB3032" data-index="6">Q4.6</div>
                <div class="plc-item" data-byte="VB3032" data-index="7">Q4.7</div>
            </div>
            <div class="plc-ul">
                <div class="plc-item" data-byte="VB3033" data-index="0">Q5.0</div>
                <div class="plc-item" data-byte="VB3033" data-index="1">Q5.1</div>
                <div class="plc-item" data-byte="VB3033" data-index="2">Q5.2</div>
                <div class="plc-item" data-byte="VB3033" data-index="3">Q5.3</div>
                <div class="plc-item" data-byte="VB3033" data-index="4">Q5.4</div>
                <div class="plc-item" data-byte="VB3033" data-index="5">Q5.5</div>
                <div class="plc-item" data-byte="VB3033" data-index="6">Q5.6</div>
                <div class="plc-item" data-byte="VB3033" data-index="7">Q5.7</div>
            </div>
        </div>
        <div id="analog-signal-box">
            <div class="plc-title">模拟量</div>
            <div class="plc-ul">
                <div class="analog" data-byte="VB3034" data-index="0">主起升电机温度</div>
                <div class="analog" data-byte="VW3036" data-index="0">主起升变频器电流</div>
                <div class="analog" data-byte="VW3038" data-index="0">主起升变频器电压</div>
                <div class="analog" data-byte="VW3040" data-index="0">主起升变频器转速</div>
                <div class="analog" data-byte="VW3042" data-index="0">主起升变频器功率</div>
                <div class="analog" data-byte="VW3044" data-index="0">主起升变频器转矩</div>
            </div>
            <div class="plc-ul">
                <div class="analog" data-byte="VB3035" data-index="0">副起升电机温度</div>
                <div class="analog" data-byte="VW3046" data-index="0">副起升变频器电流</div>
                <div class="analog" data-byte="VW3048" data-index="0">副起升变频器电压</div>
                <div class="analog" data-byte="VW3050" data-index="0">副起升变频器转速</div>
                <div class="analog" data-byte="VW3052" data-index="0">副起升变频器功率</div>
                <div class="analog" data-byte="VW3056" data-index="0">副起升变频器转矩</div>
            </div>
        </div>
        <div class="select-plc-btn" onclick="selectPlcOption()">
            完成
        </div>
    </div>
</div>
</body>
</html>
<script src="../../framework/jquery/jquery-3.1.1.min.js"></script>
<script src="../../framework/echars/3.15/echarts-all.min.js"></script>
<script src="../../framework/template.js"></script>
<script>
    var res = {
        "VW3048": ["0"],
        "VW3046": ["0"],
        "VB3018": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "Time": "12:30:30",
        "VB3019": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3012": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3034": ["96"],
        "VB3013": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3035": ["0"],
        "VB3010": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3032": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3011": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3033": ["0", "0", "0", "0"
            , "0", "0", "0", "0"],
        "VB3016": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3014": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3015": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VW3052": ["0"],
        "VW3050": ["0"],
        "VB3030": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3031": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VW3054": ["0"],
        "VW3038": ["0"],
        "VW3036": ["380"],
        "VB3009": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3007": ["0", "1", "0", "0", "0", "0", "0", "0"],
        "VB3029": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3008": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3001": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3017": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3023": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3002": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3024": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3021": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3000": ["0", "1", "0", "0", "0", "0", "0", "0"],
        "VB3022": ["0", "1", "0", "1", "0", "0", "0", "0"],
        "VB3005": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3027": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3006": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3028": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3003": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3025": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3004": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VB3026": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VW3040": ["0"],
        "VW3044": ["0"],
        "VB3020": ["0", "0", "0", "0", "0", "0", "0", "0"],
        "VW3042": ["0"]
    };//模拟数据
    var resArr=[];
    var xAxisData=[];
    var $plcDialog=$('#select-plc');
    var plcArr=[];//选择点位数组
    var plcDataArr=[]//点位组装数据数组
    var myChart;
    dataDemo();
    pageready();
    function pageready(){
        $('.plc-item').on('click',function(){
            var $this=$(this);
            if(!$this.hasClass('checked')){
                if($('.plc-item.checked').length>11)return alert('最多选择12个PLC状态');
                $this.addClass('checked')
            }else{
                $this.removeClass('checked');
            }
        });
        $('.analog').on('click',function(){
            var $this=$(this);
            if(!$this.hasClass('checked')){
                if($('.analog.checked').length>3)return alert('最多选择4个模拟量');
                $this.addClass('checked')
            }else{
                $this.removeClass('checked');
            }
        });
    }
    function selectPlcOption(){
        $plcDialog.css('visibility','hidden');
        $('.plc-item.checked').each(function(){
            var $this=$(this);
            var byte=$this.data('byte');
            var index=$this.data('index');
            var name=$this.text();
            plcArr.push({name:name,byte:byte,index:index,type:'plc'});
        });
        $('.analog.checked').each(function(){
            var $this=$(this);
            var byte=$this.data('byte');
            var index=$this.data('index');
            var name=$this.text();
            plcArr.push({name:name,byte:byte,index:index,type:'analog'});
        });
        markData();
    }
    //打开选择界面
    function openPlcDialog(){
        $plcDialog.css('visibility','visible');
        plcArr=[];
        plcDataArr=[]
    }
    //时序图数据组装
    function markData(){
        for(var j in plcArr){
            var o=plcArr[j];
            o.data=[];
            for(var i in resArr){
                o.data.push(resArr[i][o.byte][o.index]);
            }
            plcDataArr.push(o);
        }
        console.log(JSON.stringify(plcDataArr));
        zenderEcharts()
    }
    function zenderEcharts() {
        var gridArr=[];
        var xAxisArr=[];
        var yAxisArr=[];
        var seriesArr=[];
        var plcData;
        var dataZoom=[{
                show: true,
                realtime: true,
                start: 0,
                end: 9,
                xAxisIndex:[]
            }];
        var canvas_h=30;
        var xAxisIndex=[];
        for(var i=0;i<plcDataArr.length;i++){
            plcData=plcDataArr[i];
            dataZoom[0].xAxisIndex.push(i);
            xAxisArr.push({
                type: 'category',
                boundaryGap: false,
                axisLine: {onZero: false},
                data: xAxisData,
                axisTick: {
                    interval: 0
                },
                gridIndex:i
            });
            if(plcData.type=='plc'){
                gridArr.push({
                    left: 60,
                    right: 50,
                    top:canvas_h,
                    height:15
                });
                yAxisArr.push({
                    name:plcData.name,
                    min: 0,
                    max: 1,
                    type: 'value',
                    splitNumber: 1,
                    interval: 1,
                    nameTextStyle:{
                        color:'#39baff'
                    },
                    gridIndex:i
                });
                seriesArr.push({
                    type:'line',
                    step:'end',
                    data:plcData.data,
                    xAxisIndex: i,
                    yAxisIndex: i,
                    animation:false
                });
                canvas_h+=70;
            }else{
                gridArr.push({
                    left: 60,
                    right: 50,
                    top:canvas_h,
                    height:100
                });
                yAxisArr.push({
                    name:plcData.name,
                    type: 'value',
                    nameTextStyle:{
                        color:'#39baff'
                    },
                    gridIndex:i
                });
                seriesArr.push({
                    type:'line',
                    data:plcData.data,
                    xAxisIndex: i,
                    yAxisIndex: i,
                    animation:false
                });
                canvas_h+=150;
            }
        }
        var option = {
            grid: gridArr,
            dataZoom: dataZoom,
            xAxis: xAxisArr,
            yAxis: yAxisArr,
            series:seriesArr
        };
        console.log(JSON.stringify(option));
        if($('#1').height()<canvas_h)$('#1').height(canvas_h+40);
        if(myChart)myChart.dispose();
        myChart= echarts.init(document.getElementById('1'));
        myChart.setOption(option);
    }
    function dataDemo(){
        for(var i=0;i<300;i++){
            resArr.push(res);
            xAxisData.push(i+1);
        }
    }
    function closeWin(){
        _load('../eqpt/eqpt.html');
    }
//    zenderEcharts();
</script>



